.circle {
    --bb-circle-stroke-color: #{$bb-circle-stroke-color};
    --bb-circle-stroke-width: #{$bb-circle-stroke-width};
    --bb-circle-progress-stroke-color: #{$bb-circle-progress-stroke-color};
    display: inline-block;
    position: relative;
}

[data-bs-theme='dark'] .circle {
    --bb-circle-stroke-color: #495057;
}

.circle-inner {
    stroke: var(--bb-circle-stroke-color);
    stroke-width: var(--bb-circle-stroke-width);
    stroke-linejoin: round;
    stroke-linecap: round;
    fill: none;
}

.circle-progress {
    stroke: var(--bb-circle-progress-stroke-color);
    stroke-linejoin: round;
    stroke-linecap: round;
    fill: none;
    transition: stroke-dashoffset .3s linear;
}

.circle-primary {
    --bb-circle-progress-stroke-color: var(--bs-primary);
}

.circle-danger {
    --bb-circle-progress-stroke-color: var(--bs-danger);
}

.circle-success {
    --bb-circle-progress-stroke-color: var(--bs-success);
}

.circle-warning {
    --bb-circle-progress-stroke-color: var(--bs-warning);
}

.circle-info {
    --bb-circle-progress-stroke-color: var(--bs-info);
}

.circle-secondary {
    --bb-circle-progress-stroke-color: var(--bs-secondary);
}

.circle-dark {
    --bb-circle-progress-stroke-color: var(--bs-dark);
}

.circle-body {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
